<template>
  <n-layout-content>
    <n-form
      @drop="drop"
      @dragover="dragover"
      class="content-div"
      :style="contentStyle"
      id="test"
      :size="$store.state.form.size || 'medium'"
      :label-placement="$store.state.form.labelPlacement || 'top'"
      :label-width="$store.state.form.labelWidth || 100"
    >
      <div
        v-for="item in $store.state.fields.filter(
          (row) => row.widget.type != 'hidden'
        )"
        @click="$store.commit('selectedField', item)"
        class="widget-form-item"
        :style="gridStyle(item)"
        :draggable="isDrag && item.selected"
        @dragstart="itemDrag($event, item)"
        @drop.stop="drop($event, item)"
        @dragover="dragover"
      >
        <n-form-item :path="item.name">
          <template #label>
            <n-icon
              @mousedown="isDrag = true"
              @mouseup="isDrag = false"
              v-show="item.selected"
              :size="24"
              style="margin-right:10px;cursor:move;"
            >
              <svg-icon icon="move" />
            </n-icon>
            <span>{{ item.label }}</span>
            <span
              v-if="item.required == true"
              style="color:red;margin-left:5px;"
              >*</span
            >
          </template>
          <div class="widget-form-toolbar" v-show="item.selected">
            <n-space>
              <n-icon :size="16" @click="$store.commit('addField', item)">
                <svg-icon icon="copy" />
              </n-icon>
              <n-icon :size="16" @click="$store.commit('removeField', item)">
                <svg-icon icon="delete1" />
              </n-icon>
            </n-space>
          </div>
          <input-item :widget="item.widget" />
        </n-form-item>
      </div>
    </n-form>
  </n-layout-content>
  <n-layout-footer
    class="design-footer"
    :style="{
      backgroundColor:
        useOsTheme().value == 'dark'
          ? 'rgba(255,255,255,0.1)'
          : 'rgba(0,0,0,0.1)',
      borderTop:
        useOsTheme().value == 'dark' ? '#000 solid 2px' : '#ececec solid 2px',
    }"
  >
    <n-space>
      <div
        v-for="item in $store.state.fields.filter(
          (row) => row.widget.type == 'hidden'
        )"
        class="widget-hidden"
        @click="$store.commit('selectedField', item)"
        :style="{border:item.selected ? '1px solid #63e2b7' : '1px dashed #cecece'}"
      >
        <svg-icon icon="hidden" style="margin-right:5px;" />{{ item.label }}:{{
          item.name
        }}
        <n-icon :size="16" @click="$store.commit('removeField', item)" style="margin-left:10px;">
          <svg-icon icon="delete1" />
        </n-icon>
      </div>
    </n-space>
  </n-layout-footer>
</template>

<script>
import { ref, computed } from "vue";
import { useOsTheme } from "naive-ui";
import { useStore } from "vuex";
import InputItem from "../../components/InputItem.vue";
import { uuid } from "vue-uuid";
import SvgIcon from "../../components/SvgIcon.vue";
export default {
  components: { InputItem, SvgIcon },
  setup(porps) {
    const store = useStore();
    //容器的样式
    const contentStyle = computed(() => {
      let frs = [];
      for (let i = 0; i < store.state.form.col; i++) {
        frs.push("1fr");
      }
      return {
        height: document.documentElement.clientHeight - 50 + "px",
        backgroundColor:
          useOsTheme().value == "dark"
            ? "rgba(255,255,255,0.1)"
            : "rgba(0,0,0,0.1)",
        position: "relative",
        display: "grid",
        padding: "10px",
        gridTemplateColumns: frs.join(" "),
        gridTemplateRows:
          store.state.form.labelPlacement == "top"
            ? "repeat(auto-fit, 100px)"
            : "repeat(auto-fit, 70px)",
        gridGap: "10px",
        overflow: "auto",
      };
    });

    const gridStyle = (item) => {
      let style = {
        gridColumn: "span " + item.col,
        gridRow: "span " + item.row,
        position: "relative",
        gridAutoFlow: "dense",
      };
      if (item.selected) {
        // style.backgroundColor = "rgba(99, 226, 183,0.3)";
        style.border = "1px solid #63e2b7";
      }
      return style;
    };
    //处理拖拽
    const isDrag = ref(false);
    //拖拽放开事件
    const drop = (e, _item) => {
      isDrag.value = false;
      e.preventDefault();
      var data = JSON.parse(e.dataTransfer.getData("Json"));
      //包含type的是组件位置移动，需要找到当前组件的下标，插入到之后,item不为空时，可能是新增组件，需要考虑
      if (data.hasOwnProperty("type")) {
        if (data.type == "item") {
          const i = store.state.fields.findIndex((row) => row == _item);
          store.commit("moveField", { item: "selected", index: i });
        }
      } else if (!data.hasOwnProperty("type") && typeof _item != "undefined") {
        const obj = {
          name: "",
          label: data.title,
          widget: data.widget,
          id: uuid.v4(),
          row: data.row || 1,
          col: data.col || 1,
        };
        const i = store.state.fields.findIndex((row) => row == _item);
        store.commit("moveField", { item: obj, index: i });
      } else {
        store.commit("addField", {
          name: "",
          label: data.title,
          widget: data.widget,
          id: uuid.v4(),
          row: data.row || 1,
          col: data.col || 1,
        });
      }
    };
    const dragover = (e) => {
      e.preventDefault();
    };
    const itemDrag = (e, item) => {
      e.dataTransfer.setData("Json", JSON.stringify({ type: "item", item }));
    };
    //组件工具栏
    const barLoad = (e) => {
      console.log(e);
    };
    
    const overId = ref(null);
    return {
      isDrag,
      drop,
      dragover,
      itemDrag,
      contentStyle,
      gridStyle,
      barLoad,
      overId,
      useOsTheme,
    };
  },
};
</script>

<style lang="less" scoped>
.widget-form-item {
  border: 1px dashed #cecece;
  border-radius: 3px;
  padding: 5px;
}
.widget-form-item:hover {
  background-color: rgba(99, 226, 183, 0.05);
}
.widget-form-toolbar {
  z-index: 99;
  position: absolute;
  color: #fff;
  right: 0px;
  padding: 5px;
  cursor: pointer;
  top: 100%;
}
.darg-index {
  height: 3px;
}
.darg-index:hover {
  background-color: #63e2b7;
}
.design-footer {
  min-height: 50px;
  height: auto;
  padding: 10px;
}
.widget-hidden {
  border: #63e2b7 dashed 1px;
  border-radius: 3px;
  padding: 5px;
  cursor: pointer;
}
</style>
